<template>
  <div class="subscribe">
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="订阅种类">
        <el-checkbox-group v-model="form.type" fill="#f0704a">
          <el-checkbox label="1">上新房源</el-checkbox>
          <el-checkbox label="2">开拍房源</el-checkbox>
          <el-checkbox label="3">特惠房源</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="订阅时间">
        <el-radio-group v-model="form.resource" fill="#f0704a">
          <el-radio label="1">7天</el-radio>
          <el-radio label="2">15天</el-radio>
          <el-radio label="3">30天</el-radio>
          <el-radio label="4">自定义</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="自定义时间" v-if="form.resource == 4">
        <el-col :span="11">
          <el-date-picker
            v-model="form.value1"
            type="date"
            placeholder="选择日期"
            style="width: 100%;"
          ></el-date-picker>
        </el-col>
        <el-col class="line" :span="2" style="    text-align: center;"
          >-</el-col
        >
        <el-col :span="11">
          <el-date-picker
            v-model="form.value2"
            type="date"
            placeholder="选择日期"
            style="width: 100%;"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="获取手机号">
        <el-input
          placeholder="请输入手机号"
          v-model="form.input3"
          class="input-with-select"
        >
          <el-button slot="append">
            <span class="obtain" v-if="show" @click="OnCode">获取验证码</span>
            <span v-else>{{ second }}s</span>
          </el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="验证码">
        <el-input v-model="form.input" placeholder="请输入验证码"></el-input>
      </el-form-item>
      <el-form-item size="large">
        <p class="btn" @click="OnSubscribe">确定</p>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogFormVisible: true,
      show: true,
      timer: null,
      second: 60,
      verifyCode: "",
      form: {
        type: [],
        resource: "",
        value1: "",
        value2: "",
        input3: "",
        input: ""
      }
    };
  },
  methods: {
    OnCode() {
      this.show = false;
      this.second = 60;
      this.timer = setInterval(() => {
        if (this.second > 0) {
          this.second--;
        } else {
          this.show = true;
          clearInterval(this.timer);
          this.timer = null;
        }
      }, 1000);
      this.instance
        .getVerifyCode({
          id: this.form.input3
        })
        .then(res => {
          if (res.data.code == 0) {
            this.verifyCode = res.data.data;
          } else {
            clearInterval(this.timer);
            this.timer = null;
            this.show = true;
            this.second = 60;
          }
          this.$message({
            message: res.data.msg
          });
        })
        .catch(function(error) {});
    },
    OnSubscribe() {
      let type = "";
      this.form.type.forEach(item => {
        type += item + ",";
      });
      if (this.form.input3 != "" && this.form.input3.length == 11) {
        if (this.form.input == this.verifyCode && this.input != "") {
          this.instance
            .Subscribe({
              type: type,
              days: this.form.resource,
              telephone: this.form.input3,
              startTime: this.form.value1,
              endTime: this.form.value2
            })
            .then(res => {
              this.$message({
                message: res.data.msg
              });
              if (
                res.data.msg == "您已经成功订阅" ||
                res.data.msg == "操作成功" ||
                res.data.data == "0"
              ) {
                console.log("111");
                this.$emit("Onsubscribe", false);
              }
            })
            .catch(function(error) {});
        } else {
          this.$message({
            message: "请正确输入验证码"
          });
        }
      } else {
        this.$message({
          message: "请输入正确的手机号"
        });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.obtain {
  font-size: 14px;
  color: #f0704a;
}
.subscribe {
  .btn {
    cursor: pointer;
    width: 100%;
    height: 44px;
    background: linear-gradient(0deg, #ea5e3a, #f5885e);
    border-radius: 4px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 44px;
  }
}
</style>
<style>
.dialog_ipt > .el-input > .el-input__inner {
  height: 53px;
}
</style>
